<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/jpetstore.css" type="text/css">
    <script type="text/javascript" th:src="@{https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js}" ></script>
</head>
<body>

<!--头部引用-->
<div th:replace="/common/IncludeTop::header"></div>

<div id="Content">
    <div id="Tip">
        <p th:if="${tipInfo != null}" th:bgcolor="red"><span th:text="${tipInfo}"></span></p>
<!--            <c:if test="${tipInfo != null }">-->
<!--        <font color="red"></font>-->
<!--            </c:if>-->
    </div>

    <div id="Catalog">
        <form action="/account/login" method="post">
            <p>Please enter your username and password</p>
            </p>
            <table>
                <tr>
                    <td>Username:</td>
                    <td><input type="text" name="username" placeholder="Username" class="MustFill"/></td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td><input type="password" name="password"  placeholder="Password" class="MustFill"/></td>
                </tr>
                <tr>
                    <td>Identifying code:</td>
                    <td><input type="text" name="valistr" id="valistr" placeholder="Identitying code" class="MustFill"/></td>
                </tr>
                <tr>
                    <td><span class="validCode">Click the image</br>
                        to change the code</span></td>
                    <td><img id= "valiImage" src= "/account/creatValidString" width="" height="" alt="" /></td>
                </tr>
            </table>
            <input type="submit" name="signon" value="Login" />
        </form>
        Need a user name and password?
        <a href="/account/registerPage">Register Now!</a>
    </div>
</div>

<script>
    var $valistr = $('#valistr');

    //移动到验证码区域，变成小手
    $('#valiImage').mouseover(function () {
        $('#valiImage').css("cursor","hand");
    });

    //点击验证码，更改图片
    $('#valiImage').on('click',function () {
        var date = new Date();
        document.getElementById("valiImage").setAttribute("src","/account/creatValidString?temp="+date);
        testValid();
    });

    function testValid(){
        //获得用户输入的数据
        var valid_text = $valistr.val();
        console.log(valid_text);
        //判断非空
        if (valid_text === '') {
            //设置显示的文本字样，并使框为红色
            document.getElementById("valistr").style.borderColor = "red";
        }else {
            console.log("Im going to connect my database");
            //与数据库进行交互，判断验证码是否正确
            //与数据库连接，进行验证
            $.get("/account/judgeValidString",{"valistr":valid_text},function(data,status,xhr){
                var responseInfo = xhr.responseText;
                console.log(responseInfo);
                //验证码正确
                if(responseInfo === "Right"){
                    //设置显示的文本字样，并使框为绿色
                    document.getElementById("valistr").style.borderColor = "green";
                    console.log(valid_text + "验证码正确");
                    console.log("valid code is true");
                }else if(responseInfo === "Wrong"){
                    //验证码错误
                    //设置显示的文本字样，并使框为红色
                    document.getElementById("valistr").style.borderColor = "red";
                    console.log(valid_text + "验证码不正确");
                }
            });
        }
    }


    $valistr.bind('input propertychange',function(){
        testValid();
    });
</script>






<!--底部引用-->
<div th:replace="/common/IncludeBottom::footer"></div>

</body>
</html>